<template>
  <template v-if="loaded">
    <ProForm
      ref="formRef"
      :model="formState"
      :items="items"
      :disabled="readonly"
      :onValuesChange="onValuesChange"
      :formColLayout="formColLayout()"
      :requiredMark="!readonly"
      class="pro-form-modal"
      v-bind="formProps"
    >
    </ProForm>
    <FooterButtons
      :formState="formState"
      :formRef="formRef"
      v-model:readonly="readonly"
      :serviceApi="updateRunningModeConfig"
      @refresh="refresh"
      :fastConfig="fastConfig"
    />
  </template>
</template>

<script setup lang="tsx">
import { computed, nextTick, ref, shallowRef } from 'vue';
import { runModeOption } from '@/constant';
import { ProForm, ProFormProps } from '@/components/ProForm';
import { ItemProps } from '@/components/ProForm/interface';
import { getRunningModeConfig, updateRunningModeConfig } from '@/api/device';
import FooterButtons from './FooterButtons.vue';

defineOptions({
  name: 'RunningMode',
});

interface Props {
  pageData: any;
  readonly?: any;
  fastConfig?: boolean;
}

const props = defineProps<Props>();
console.log(props.pageData, 'pageData');
const loaded = ref(false);
const readonly = ref(props.readonly ?? true);
const formRef = shallowRef();
const formState = ref<Record<string, any>>({});
const column = 3;
const formColLayout = () => {
  const num = 24 / column;
  return { xs: num, sm: num, md: num, lg: num };
};
const formProps = computed<ProFormProps>(() => {
  return {
    labelCol: { span: 7 },
    wrapperCol: { span: 20 },
  };
});
const onValuesChange = (
  values: Record<string, any>,
  state: Record<string, any>,
) => {
  formState.value = {
    ...formState.value,
    ...state,
  };
};
const refresh = () => {
  loaded.value = false;
  nextTick(() => {
    loaded.value = true;
  });
};
const save = async () => {
  const data = await formRef.value.validate();
  props.pageData.runningModeConfigsJson = JSON.stringify(data);
};
const itemObj = (
  label: string,
  field: string,
  defaultValue: string,
): ItemProps => {
  return {
    label,
    type: 'input',
    field,
    props: { defaultValue },
    disabled: true,
  };
};
const itemRender = (title: string): ItemProps => {
  return {
    label: { title },
    type: 'input',
    field: 'h5',
    formItemRender() {
      return <h5 class='h5'>{title}</h5>;
    },
  };
};
const isDeviceType2 = props.pageData.deviceType == '2';
const runOption = computed(() => {
  // 只有预警终端 并且软件版本号大于等于11  才显示科普模式
  if (
    props.pageData.deviceType == '1' &&
    Number(props.pageData.version || 0) >= 11
  )
    return runModeOption;
  return runModeOption.filter((i) => i.label !== '科普模式');
});

const items = computed<ProFormProps['items']>(() => [
  itemRender('服务配置'),
  {
    label: '运行模式',
    type: 'select',
    field: 'runningMode',
    props: {
      options: runOption.value,
      placeholder: '请选择运行模式',
    },
    rules: [
      {
        required: true,
        message: '请选择运行模式',
        trigger: 'blur',
      },
    ],
  },
  itemRender('配置详情'),
  ...(formState.value?.runningMode == 0
    ? [
        itemObj('预警服务', 'r01', '默认关(固定值)'),
        itemObj('预警来源', 'r02', '预警平台(固定值)'),
        itemObj('文件服务', 'r03', '默认关(固定值)'),
        itemObj('蓝色预警音量', 'r04', '0%(固定值)'),
        itemObj('黄色预警音量', 'r05', '0%(固定值)'),
        itemObj('橙色预警音量', 'r06', '0%(固定值)'),
        itemObj('红色预警音量', 'r07', '0%(固定值)'),
        itemObj('自检音量', 'r08', `${isDeviceType2 ? '7%' : '40%'}(固定值)`),
        itemObj('消音音量', 'r09', '0%(固定值)'),
        itemObj('速报音量', 'r010', '0%(固定值)'),
        itemObj('气象音量', 'r011', '0%(固定值)'),
        itemObj('视频音量', 'r012', '0%(固定值)'),
        itemObj('广播音量', 'r013', '0%(固定值)'),
        {
          label: '配置说明',
          type: 'input',
          field: 'h5',
          formItemRender: () => {
            return <p class='tips'>以上配置不能修改</p>;
          },
        } as ItemProps,
      ]
    : []),
  ...(formState.value?.runningMode == 1
    ? [
        itemObj('预警服务', 'r11', '默认开(固定值)'),
        itemObj('预警来源', 'r12', '预警平台(固定值)'),
        itemObj('文件服务', 'r13', '默认开(固定值)'),
        itemObj('蓝色预警音量', 'r14', '100%(固定值)'),
        itemObj('黄色预警音量', 'r15', '100%(固定值)'),
        itemObj('橙色预警音量', 'r16', '100%(固定值)'),
        itemObj('红色预警音量', 'r17', '100%(固定值)'),
        itemObj('自检音量', 'r18', `${isDeviceType2 ? '7%' : '40%'}(固定值)`),
        itemObj('消音音量', 'r19', '0%(固定值)'),
        itemObj('速报音量', 'r110', '0%(可修改)'),
        itemObj('气象音量', 'r111', '0%(可修改)'),
        itemObj('视频音量', 'r112', '0%(可修改)'),
        itemObj('广播音量', 'r113', '100%(可修改)'),
        {
          label: '配置说明',
          type: 'input',
          field: 'h5',
          formItemRender: () => {
            return (
              <p class='tips'>
                除速报音量，气象音量，视频音量，广播音量外；以上配置不能修改；切换至本模式时，配置会被重置
              </p>
            );
          },
        } as ItemProps,
      ]
    : []),
  ...(formState.value?.runningMode == 2
    ? [
        itemObj('预警服务', 'r21', '默认开(可修改)'),
        itemObj('预警来源', 'r22', '预警平台&管理平台(可修改)'),
        itemObj('文件服务', 'r23', '默认开(可修改)'),
        itemObj('蓝色预警音量', 'r24', '100%(可修改)'),
        itemObj('黄色预警音量', 'r25', '100%(可修改)'),
        itemObj('橙色预警音量', 'r26', '100%(可修改)'),
        itemObj('红色预警音量', 'r27', '100%(可修改)'),
        itemObj('自检音量', 'r28', `${isDeviceType2 ? '7%' : '40%'}(可修改)`),
        itemObj('消音音量', 'r29', '0%(可修改)'),
        itemObj('速报音量', 'r210', '100%(可修改)'),
        itemObj('气象音量', 'r211', '100%(可修改)'),
        itemObj('视频音量', 'r212', '0%(可修改)'),
        itemObj('广播音量', 'r213', '100%(可修改)'),
        {
          label: '配置说明',
          type: 'input',
          field: 'h5',
          formItemRender: () => {
            return (
              <p class='tips'>以上配置可修改；切换至本模式时，配置会被重置</p>
            );
          },
        } as ItemProps,
      ]
    : []),
  ...(formState.value?.runningMode == 3
    ? [
        itemObj('预警服务', 'r31', '默认关(固定值)'),
        itemObj('预警来源', 'r32', '终端'),
        itemObj('文件服务', 'r33', '默认关(固定值)'),
        itemObj('蓝色预警音量', 'r34', '0%(固定值)'),
        itemObj('黄色预警音量', 'r35', '0%(固定值)'),
        itemObj('橙色预警音量', 'r36', '0%(固定值)'),
        itemObj('红色预警音量', 'r37', '0%(固定值)'),
        itemObj('自检音量', 'r38', `40%(固定值)`),
        itemObj('消音音量', 'r39', '0%(固定值)'),
        itemObj('速报音量', 'r310', '0%(固定值)'),
        itemObj('气象音量', 'r311', '0%(固定值)'),
        itemObj('视频音量', 'r312', '70%(固定值)'),
        itemObj('广播音量', 'r313', '0%(固定值)'),
        itemObj('速报', 'r314', '默认关(固定值)'),
        itemObj('气象', 'r315', '默认关(固定值)'),
        itemObj('广播', 'r316', '默认关(固定值)'),
        {
          label: '配置说明',
          type: 'input',
          field: 'h5',
          formItemRender: () => {
            return <p class='tips'>以上配置不能修改</p>;
          },
        } as ItemProps,
      ]
    : []),
]);

props.pageData.runningModeConfigsJson
  ? (() => {
      formState.value = JSON.parse(props.pageData.runningModeConfigsJson);
      loaded.value = true;
    })()
  : getRunningModeConfig(props.pageData.code).then((res: any) => {
      formState.value = res.data;
      formState.value.code = props.pageData.code;
      loaded.value = true;
    });

defineExpose({ save });
</script>
